@use "@styles/mixins/bem" as *;
@use "@styles/mixins/function" as *;
@use "@styles/mixins/namespace" as *;

$border-radius: 6px;

/* 富文本组件校验失败样式 */
.is-error {
  @include b(wang-editor) {
    border-color: cssVarEl(color-danger);
  }
}

/* 富文本组件样式 */
@include b(wang-editor) {
  /* 激活颜色 */
  --w-e-toolbar-active-color: var(--#{$admin-namespace}-gray-900);

  /* 激活背景颜色 */
  --w-e-toolbar-active-bg-color: rgb(var(--#{$admin-namespace}-gray-200-rgb), 0.4);

  /* 表格选中时候的边框颜色 */
  --w-e-textarea-selected-border-color: var(--#{$admin-namespace}-color-primary);

  /* 表格头背景颜色 */
  --w-e-textarea-slight-bg-color: rgb(var(--#{$admin-namespace}-gray-200-rgb), 0.4);

  // 工具栏背景颜色
  --w-e-toolbar-bg-color: var(--#{$admin-namespace}-bg-color);

  // 输入区域背景颜色
  --w-e-textarea-bg-color: var(--#{$admin-namespace}-bg-color);

  // 工具栏文字颜色
  --w-e-toolbar-color: var(--#{$admin-namespace}-text-gray-800);

  // 弹窗边框颜色
  --w-e-toolbar-border-color: var(--#{$admin-namespace}-border-dashed-color);

  // 分割线颜色
  --w-e-textarea-border-color: var(--#{$admin-namespace}-border-dashed-color);

  // 链接输入框边框颜色
  --w-e-modal-button-border-color: var(--#{$admin-namespace}-border-dashed-color);

  // 按钮背景颜色
  --w-e-modal-button-bg-color: var(--#{$admin-namespace}-color);

  z-index: 1100;
  width: 100%;
  height: 100%;
  border: 1px solid cssVar(gray-300);
  border-radius: calc(cssVar(radius) / 2 + 2px);

  /* 富文本组件禁用样式 */
  &.disabled {
    cursor: not-allowed;
  }

  @include e(toolbar) {
    border-bottom: 1px solid cssVar(gray-300);
  }

  .w-e-bar {
    border-radius: $border-radius;
  }

  *:not(pre code *) {
    color: inherit !important;
  }

  /* 下拉选择框配置 */
  .w-e-select-list {
    padding: 6px;
    border: none;
  }

  /* 下拉选择框元素配置 */
  .w-e-select-list ul li {
    padding: 5px 16px;
    margin-top: 5px;
    font-size: 15px;
    border-radius: $border-radius;

    &:hover {
      background-color: cssVar(gray-100);
    }

    &.selected {
      background-color: cssVar(gray-100);

      /** 隐藏勾选图标 */
      svg {
        display: none;
      }
    }
  }

  /* 工具栏按钮样式 */
  .w-e-bar-item button {
    border-radius: $border-radius;

    &:hover {
      background-color: cssVar(gray-200);
    }
  }

  /* 工具栏菜单 */
  .w-e-bar-item-group .w-e-bar-item-menus-container {
    border: none;
    border-radius: $border-radius;
  }

  /* 弹出框 */
  .w-e-drop-panel {
    border: 0;
    border-radius: $border-radius;
  }

  a {
    color: cssVarEl(color-primary);
  }

  /* 富文本编辑器内容区样式 */
  .w-e-text-container {
    border-radius: $border-radius;

    strong,
    b {
      font-weight: 500;
    }

    i,
    em {
      font-style: italic;
    }
  }

  .w-e-text-container [data-slate-editor] {
    /* 代码块 */
    pre > code {
      padding: 0.6rem 1rem;
      background-color: cssVar(gray-100);
      border-radius: $border-radius;
    }

    /* 表格样式优化 */
    .table-container th {
      border-right: none;

      &:last-of-type {
        border-right: 1px solid var(--w-e-textarea-border-color);
        border-right-width: 1px !important;
      }
    }

    /* 引用 */
    blockquote {
      background-color: rgb(cssVar(gray-300-rgb), 0.25);
      border-left: 4px solid cssVar(gray-300);
    }

    /* 图片样式调整 */
    .w-e-selected-image-container {
      overflow: inherit;

      &:hover {
        border: 0;
        border: 1px solid cssVarEl(color-primary);
      }

      img {
        border: 1px solid transparent;
        transition: border 0.3s;

        &:hover {
          border: 1px solid cssVarEl(color-primary);
        }
      }

      .w-e-image-dragger {
        width: 12px;
        height: 12px;
        background-color: cssVarEl(color-primary);
        border: 1px solid #ffffff;
        border-radius: $border-radius;
      }
    }
  }

  /* 输入区域弹出 bar  */
  .w-e-hover-bar {
    border-radius: $border-radius;
  }

  /* 超链接弹窗 */
  .w-e-modal {
    border: none;
    border-radius: $border-radius;
  }
}

.dark {
  @include b(wang-editor) {
    /* 下拉选择框元素配置 */
    .w-e-select-list ul li {
      &.selected,
      &:hover {
        background-color: cssVar(gray-200);
      }
    }

    /* 代码块 */
    .w-e-text-container [data-slate-editor] pre > code {
      text-shadow: none !important;
      background-color: cssVar(gray-200) !important;
      border: 1px solid cssVar(border-dashed-color) !important;
    }
  }
}
